<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>音频转述师</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/aui.css" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/aui-pull-refresh.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
	<style>

		#tabs div:after{
			content: "";
			position: absolute;
			display: block;
			width: 0;
			height: .25rem;
			background-color: #282828;
			bottom: 0;
			left: 50%;
			transition: all .4s;
			transform: translate(-50%,0);
		}
		#tabs div.active:after{
			width: 2.5rem;
		}
		em.down img{
			transform:rotateZ(180deg);
		}
		.item{
			justify-content: space-between;
			padding: 1.1rem 0;
			border-bottom: 1px #e5e5e5 solid;
			display: flex;
		}
		.item b{
			margin-bottom:0.833333rem;
			display: block;
			line-height: 1.833333rem;
			font-size: 1.5rem;
		}
		.item em{
			display: block;
			width: 3.666666rem;
			height: 1.833333rem;
			border: 1px solid #666;
			border-radius: 0.549999rem;
			text-align: center;
			line-height: 1.833333rem;
			font-size: 1.166666rem;
		}
		#wpr{
			color: #666;
			font-size: 1.25rem;
			line-height: 1.5rem;
		}
		#wpr .item:nth-last-child(1){
			border: none;
		}
		.back-c {
			background-position: center center;
			background-size: contain;
			background-repeat: no-repeat;
		}
		.p-r{
			position: relative;
			line-height: 33px;
		}
		.left span{
			float: left;
			width: 3.33rem;
			height: 3.33rem;
			display: inline;
			margin-right: .83rem;
			border-radius: 50%;
			background-position: center center;
			background-size: contain;
			background-repeat: no-repeat;
		}
		.buy{
			float: right;
			width: 7.083333rem;
			line-height: 2.5rem;
			background: -webkit-gradient(linear,center top,center bottom,from(#F7BA64),to(#ED8434));
			border-radius: 8.333333rem;
			font-size: 1.083333rem;
			color: #fff;
			text-align: center;
			box-shadow: 0 0.166666rem 0.416666rem 0 #F8CAA7;
		}
		.scrollload-bottom{
			margin-top: 2rem;
		}
		.clearfix :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
	</style>
</head>

<body>
<div class="scrollload-containernew">
	<div id="content" class="scrollload-contentnew" style="overflow: hidden;">

	</div>
</div>
<div id="warn" style="background: rgba(0, 0, 0, 0.7);text-align: center;border-radius: 0.25rem;color: #ffffff;position: fixed;z-index: 3000;top: 45%;left: 50%;width: 8em;margin-left: -4em;height: 3rem;line-height: 3rem;display: none;"></div>
</body>
</script>
</html>
<script src="js/out7.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-dialog.js" type="text/javascript" charset="utf-8"></script>
<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
</script>
<script id="transfer_tem" type="text/html">
	<div class="col-xs-12" align="center" style="float: none;">
		<img src="{{data.headimg | addFaceUrl}}" alt="" style="width: 9rem;height: 9rem;padding: 1rem;border-radius: 100%;"/>
		<p style="color: #282828;font-size: 1.25rem;font-weight: bold;margin-bottom: 5px;">{{data.nickname}}</p>
		<p style="color: #282828; font-size: 1.08rem;line-height:1.6666rem;text-align: left;padding-bottom: 1.67rem;">{{data.signature}}</p>
	</div>
	<div style="width: 100%;height:.83rem;background: #F8F8F8;"></div>
	<p style="color: #282828;font-size:1.5rem;font-weight: bold;padding-top: 2.08rem;margin-bottom: 0;padding-left: 15px;">{{job}}了{{data.book_count}}本书</p>
</script>
<script id="newbook_tem" type="html/javascript">
		{{each data.bookList}}
			<div class=" bookdetail" data-bookid={{$value.bookid}} data-bookname={{$value.bookname}} data-bookimg={{$value.bookimg}} data-bookrecommend={{$value.bookrecommend}} style="min-height: 12rem;height:auto;width:100%;padding:1rem 1.5rem 3rem 1.5rem;margin-top:2.2rem;">
			    <div class="col-xs-4" style="height:12rem;width: 29.3333%;padding:0rem;">
			        <a href="javascript:void(0)" style="display:block;height: 100%;position:relative;">
			            <img src="{{$value.bookimg | addUrl}}" style="width:9.17rem;height:100%;box-shadow: 3px 3px 3px #e6e6e6;border: 0;vertical-align: middle;">
					    <em style="position: absolute;display: block;width: 1.5rem;height: 1.5rem;bottom: 0.5rem;right: 1.6rem;background: url(icon/listen.png) center center no-repeat;background-size: 100%;"></em>
			        </a>
			    </div>
			    <div class="col-xs-8" style="padding:0;position:relative;left:1.2rem;margin: 0;height:12rem;width: 68.666%;">
			        <div class="col-xs-12" style="padding: 0;margin: 0;">
			            <p class="aui-ellipsis-1" style="font-family: bolder;font-size: 16px;color: #282828">{{$value.bookname}}</p>
			            <p class="aui-ellipsis-2" style="font-size: 13px;color: #666666;">{{$value.bookrecommend}}</p>
			        </div>
			        <div class="col-xs-7" style="position:absolute;bottom:0;padding: 0;margin-top: 1rem;">
			            <p style="font-size: 12px;color: #999999;margin: 0;">{{$value.videoduration}}</p>

			        </div>
			        {{if userVip.type==1||$value.isorder==1}}
			        <div class="buy" data-isorder="{{$value.isorder}}" data-bookid={{$value.bookid}} style="position: absolute;right: 0.5rem;bottom: 0.5rem;width: 7.8rem;height:2.5rem;background-image: linear-gradient(-179deg, #F7BA64 0%, #fbd454 100%);box-shadow: 0 2px 5px 0 #F8CAA7;border-radius: 100px;text-align: center;color: #333333;font-weight: bold; font-size:1.4rem; line-height: 2.7rem;">
			       			开始听书
			        </div>
			        {{else}}
					<div style="position: absolute;right: 0.5rem;bottom: 0.2rem;width: 7.8rem;height:1.5rem;font-size: 1.4rem; font-weight: bold; text-align: center;color: #ED8434;">
						{{"¥ " + $value.bookprice}}
					</div>
			        {{/if}}
			    </div>
			</div>
		{{/each}}
</script>

<script type="text/javascript">

    var toast = new auiToast();
    var page = 1;
    var type = GetQueryString('type');
    var userid = GetQueryString('authorId')
    var totalpage = null;
    $(function(){
        function after(){
            toast.loading({
                title:"加载中",
                duration:2000
            });
            var sign = hex_md5(objKeySort({token:token,timestamp:date,userid:userid,page:page,rows:'10',merchantId:merchantId}))
            $.ajax({
                type:"get",
                url:hostUrl+'product/copywriter/'+ token +'/'+ sign +'/'+ date + '/'+ merchantId +'/'+ userid +'/'+ page +'/10',
                async:true,
                success:function(data){
                    data.userVip=userVip;
                    var html = template("transfer_tem",data);
                    document.getElementById('content').innerHTML = html;
                    toast.hide();
                    totalpage = Math.ceil(data.data.bookCount/10)+1;

                    var page =0 ;
                    var sc = new Scrollload({
                        container: document.querySelector('.scrollload-containernew'),
                        content: document.querySelector('.scrollload-contentnew'),
                        noMoreDataHtml : '<div id="slogen" align="center" class="col-xs-12" style="padding-bottom: 3.75rem;padding-top:2rem;height: 1.17rem; width:92%;font-size:1.4rem;left:4%">'+
                        slogenFont[rand(0,slogenFont.length)]+
                        '</div>',
                        loadMore: function(sl) {
                            page++;
                            if (page === totalpage) {
                                // 没有数据的时候需要调用noMoreData
                                sl.noMoreData()
                                return
                            }else{
                                sign = hex_md5(objKeySort({token:token,timestamp:date,userid:userid,page:page,rows:'10',merchantId:merchantId}))
                                $.ajax({
                                    type:"get",
                                    url:hostUrl+'product/copywriter/'+ token +'/'+ sign +'/'+ date +'/'+ merchantId +'/'+ userid +'/'+ page +'/10',
                                    async:true,
                                    success:function(data){
                                        data.userVip=userVip;
                                        var newbook = template("newbook_tem",data);
                                        document.getElementById('content').innerHTML += newbook;
                                        sl.unLock()
                                    }
                                });
                            }


                        },
                        // 你也可以关闭下拉刷新
                        enablePullRefresh: true,
                        pullRefresh: function (sl) {
                            sign = hex_md5(objKeySort({token:token,timestamp:date,userid:userid,page:page,rows:'10',merchantId:merchantId}))
                            $.ajax({
                                type:"get",
                                url:hostUrl+'product/copywriter/'+ token +'/'+ sign +'/'+ date +'/'+ merchantId +'/'+ userid +'/'+ page +'/10',
                                async:true,
                                success:function(data){
                                    sl.refreshData();
                                    page = 1;
                                    $("#content .bookdetail").remove();
                                    data.userVip=userVip;
                                    var newbook = template("newbook_tem",data);
                                    document.getElementById('content').innerHTML += newbook;
                                    sl.unLock()
                                }
                            });
                            sl.refreshComplete()
                        }
                    })
                }
            });

        }

        getToken(after);



        $("#content").on('click','.bookdetail',function(){
            window.location.href = "bookDetail.html?bookid="+$(this).attr('data-bookid')+"&videoauthorid="+$(this).attr('data-videoauthorid')+"&copywriter="+$(this).attr('data-copywriter');
        })
        //分享的弹出

        $("title").html(type == "0" ? "蜜读特约撰稿人" : "音频转述师");
        template.defaults.imports.job = type == "0" ? "共精编" : "共讲述"


        $("#content").on('click','.buy',function(e){
            e.stopPropagation()
            var parent=$(this).parents('.bookdetail')
            location.href = "chapter.html?bookid=" + parent.attr('data-bookid') + "&videoauthorid=" + parent.attr('data-videoauthorid') + "&copywriter=" + parent.attr('data-copywriter') + "&bookname="+parent.attr('data-bookname')+"&bookimg=" + parent.attr('data-bookimg');
            return;
            if($(this).attr('data-isorder')=="0"){
                e.stopPropagation();
                bookId = $(this).attr('data-bookid');
                payClick(JSON.parse(window.sessionStorage.getItem("weixinData")),2,bookId,false);
            }else{
                return;
            }
        })



    })











</script>